<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px;">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="handleSearch"
        @reset="handlerReset"
      >
        <Button icon="add" @click="handleAdd">新增</Button>
      </FilterForm>
    </Container>
    <Container height="fill" display="flexY">
      <Table
        :columns="tableColumns"
        :data="tableData"
        row-key="id"
        :loading="tableLoading"
        children="childNodes"
        has-children="hasChildren"
      >
        <!-- <template v-slot:icon="scoped">
          <span><i :class="['iconfont', `${scoped.row.icon}`]" /></span>
        </template> -->
        <template #caozuo="row">
          <div class="table-btn">
            <el-tooltip content="编辑" placement="top" :open-delay="500">
              <TextButton
                type="primary"
                @click.native="handlerEidt(row.row)"
              ><i
                class="el-icon-edit"
              /></TextButton>
            </el-tooltip>
            <el-tooltip
              content="删除"
              placement="top"
              :open-delay="500"
            >
              <TextButton
                type="delete"
                @click.native="handlerDelete(row.row)"
              ><i
                class="el-icon-delete"
              /></TextButton>
            </el-tooltip>
          </div>
        </template>
      </Table>

      <Drawer
        :visible="visible"
        width="40%"
        :title="title"
        :footer-btns="footerBtns"
        @cancel="handleCancel"
        @submit="handleSubmit"
      >
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          size="mini"
          class="demo-ruleForm"
        >
          <el-form-item label="菜单类型：" prop="menuType">
            <el-radio-group v-model="ruleForm.menuType">
              <el-radio
                :label="0"
                :disabled="btnType === 2 && ruleForm.menuType===1"
              >
                父级名称
              </el-radio>
              <el-radio
                :label="1"
                :disabled="btnType === 2 && ruleForm.menuType===0"
              >
                子级名称
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 子菜单 -->
          <el-form-item
            v-if="ruleForm.menuType == 1"
            label="上级菜单："
            prop="parentId"
          >
            <!-- <el-select v-model="ruleForm.parentId" style="width:100%;" placeholder="请选择上级菜单">
              <el-option v-for="item in parentMenus" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-cascader
              v-model="ruleForm.parentId"
              :options="parentMenus"
              :show-all-levels="false"
              placeholder="请选择上级菜单"
              :props="{ checkStrictly: true,children:'childNodes',label: 'menuName',value: 'id' }"
              clearable
              style="width: 100%;"
            />
          </el-form-item>
          <el-form-item label="菜单名称：" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入菜单名称" />
          </el-form-item>
          <!-- v-if="ruleForm.menuType===0" -->
          <!-- <el-form-item
            label="图标："
            prop="icon"
          >
            <div
              ref="block-toggle"
              class="chose-block div-focus"
              @click="handleChooseIcon"
            >
              <span
                :class="[ruleForm.icon ? 'block-color-fill' : 'iconText-color']"
              >
                {{ !ruleForm.icon ? '请选择图标' : ruleForm.icon }}
              </span>
              <span :class="[isDj ? 'chose-cart' : '']">
                <i
                  :class="[
                    'el-icon-arrow-down',
                    'iconText-color',
                    isDj ? 'chose-cart' : 'is-reverse',
                  ]"
                />
              </span>
            </div>
          </el-form-item> -->
          <el-form-item label="路径：" prop="path">
            <el-input v-model="ruleForm.path" placeholder="请输入路径" />
          </el-form-item>
          <!-- <el-form-item label="排序：" prop="sort">
            <el-input v-model="ruleForm.sort" placeholder="请输入排序" />
          </el-form-item> -->
        </el-form>
      </Drawer>
      <!-- 图标弹窗 -->
      <!-- <Dialog
        id="dialogWraper"
        class="dialog-wraper"
        :title="iconTitle"
        :visible="iconVisible"
        @cancel="() => (iconVisible = false)"
      >
        <div class="wraper-box">
          <div
            v-for="(item, index) in iconList"
            :key="index"
            class="icon-box"
            @click="handleClickIcon(item)"
          >
            <i :class="['iconfont', `${item.font_class}`]" />
          </div>
        </div>
      </Dialog> -->
    </Container>
  </ContainerGroup>
</template>
<script>
// import iconList from '@/utils/iconSet'
import {
  insertSysMenu,
  updateSysMenu,
  getMenuAll,
  deleteMenuById,
  getMenuSelect,
  getMenuInfoById
} from '../../utils/apis/userManager/index'

export default {
  name: 'MenuManage',
  data() {
    return {
      isShowType: 1, // 默认显示
      // iconList,
      ruleForm: {
        menuType: 0,
        name: '',
        parentId: '',
        icon: '',
        path: '',
        sort: ''
      },
      rules: {
        menuType: [
          {
            required: true,
            message: '请选择菜单类型',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入菜单名称',
            trigger: 'blur'
          }
        ],
        parentId: [
          {
            required: true,
            message: '请选择父级菜单',
            trigger: 'change'
          }
        ],
        icon: [
          {
            required: true,
            message: '请选择图标',
            trigger: 'blur'
          }
        ],
        path: [
          {
            required: true,
            message: '请输入路由网址',
            trigger: 'blur'
          }
        ]
      },
      iconTitle: '图标',
      iconVisible: false,
      isDj: false,
      parentMenus: [],
      visible: false,
      title: '',
      footerBtns: [
        {
          text: '确定',
          type: 'primary',
          trigger: 'submit'
        },
        {
          text: '取消',
          type: 'info',
          trigger: 'cancel'
        }
      ],
      filterElements: [
        {
          key: 'name',
          type: 'input',
          label: '菜单名称',
          value: ''
        }
      ],
      pageNum: 1,
      pageSize: 10,
      total: 1,
      tableLoading: false,
      tableColumns: [
        {
          title: '菜单名称',
          dataIndex: 'menuName'
        },
        // {
        //   title: '图标',
        //   dataIndex: 'icon',
        //   type: 'otherTag'
        // },
        // {
        //   title: '排序',
        //   dataIndex: 'sort'
        // },
        {
          title: '路径',
          dataIndex: 'path'
        },
        {
          title: '操作',
          width: 90,
          dataIndex: 'caozuo',
          type: 'otherTag'
        }
        // {
        //   title: '操作',
        //   width: 180,
        //   render: [
        //     {
        //       label: '编辑',
        //       type: 'primary',
        //       img: '&#xe6bf;',
        //       handlerClick: this.handlerEidt
        //     },
        //     {
        //       label: '删除',
        //       type: 'delete',
        //       img: '&#xe8b6;',
        //       handlerClick: this.handlerDelete
        //     }
        //   ]
        // }
      ],
      tableData: [],
      newConditon: {},
      rowDetails: {},
      btnType: 1 // 默认新增
    }
  },
  created() {
    this.getSelectMenuTree()
  },
  mounted() {
    // const that = this;
    // window.onclick = function(e) {
    //   const index = (e.target.classList).value.indexOf('chose-block');
    //   if (index > -1) {
    //     that.isDj = !that.isDj;
    //   } else {
    //     that.isDj = false;
    //   }
    // };
  },
  methods: {
    handleClear() {
      // 清除表单
      this.ruleForm.menuType = 0
      this.ruleForm.name = ''
      this.ruleForm.parentId = ''
      this.ruleForm.icon = ''
      this.ruleForm.path = ''
      this.ruleForm.sort = ''
    },
    getSelectMenuTree() {
      getMenuSelect().then((res) => {
        if (res.data.code === 200) {
          this.parentMenus = res.data.data
        }
      })
    },
    handleClickIcon(item) {
      // 小图标点击
      this.iconVisible = false
      this.ruleForm.icon = item.font_class
    },
    getData() {
      const param = {
        name: this.newConditon.name || ''
      }
      this.tableLoading = true
      getMenuAll(param).then((res) => {
        this.tableLoading = false
        if (res.data.code === 200) {
          this.tableData = res.data.data
        }
      })
    },
    // handleIconTJ(item) { // 图标选择确认
    //   this.iconVisible = false;
    //   this.ruleForm.icon = `${item.font_class}`;
    // },
    handleChooseIcon() {
      // 选择图标
      this.iconVisible = true
    },
    handlerDelete(row) {
      if (row.children && row.children.length > 0) {
        this.$message.warning('当前菜单下有子菜单，不能删除')
        return
      }
      this.$confirm({
        content: '您确定删除该条数据?',
        title: '提示',
        okFn: (res) => {
          deleteMenuById({ ids: row.id }).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message)
              this.pageNum = 1
              this.getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        }
      })
    },
    handleAdd() {
      // 新增
      this.title = '添加菜单'
      this.isShowType = 1
      this.btnType = 1
      this.handleClear()
      this.visible = true
    },
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const param = {
            menuName: this.ruleForm.name,
            parentId:
              this.ruleForm.menuType === 0
                ? 0
                : this.ruleForm.parentId[this.ruleForm.parentId.length - 1],
            path: this.ruleForm.path
          }
          if (this.btnType === 1) {
            // 新增
            insertSysMenu(param).then((res) => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message)
                this.visible = false
                this.getSelectMenuTree()
                this.getData()
              } else {
                this.$message.error(res.data.message)
              }
            })
          } else {
            // 修改
            param.id = this.rowDetails.id
            updateSysMenu(param).then((res) => {
              if (res.data.code === 200) {
                this.$message.success(res.data.message)
                this.getData()
                this.getSelectMenuTree()
                this.visible = false
              } else {
                this.$message.error(res.data.message)
              }
            })
          }
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    handlerEidt(row) {
      this.title = '编辑菜单'
      this.btnType = 2
      this.handleClear()
      this.visible = true
      // if (row.parentId === '0') {
      //   // this.isShowType = 1
      //   this.ruleForm.menuType === 0
      // } else {
      //   this.ruleForm.menuType === 1
      //   // this.isShowType = 2
      // }
      this.rowDetails = row
      this.getPerMenu(row.id)
    },
    getPerMenu(id) {
      getMenuInfoById({ id: id }).then(res => {
        if (res.data.code === 200) {
          const value = res.data.data
          this.ruleForm.menuType = value.ids?.length > 1 ? 1 : 0
          this.ruleForm.name = value.menuName
          this.ruleForm.parentId = value.ids?.length > 1 ? value.ids.filter((item, index) => {
            if (value.ids.length - 1 !== index) {
              return item
            }
          }) : 0
          this.ruleForm.path = value.path
        }
      })
    },
    handleSearch(value) {
      this.newConditon = value
      // this.pageNum = 1;
      this.getData()
    },
    handlerReset(value) {
      this.newConditon = value
      // this.pageNum = 1;
      this.getData()
    },
    handlePagination() {
      // 分页
    }
  }
}
</script>
<style lang="less" scoped>
// /deep/.el-table__expand-icon {
//   -webkit-transform: rotate(0deg);
//   transform: rotate(0deg);
//   margin-right: 10px !important;
// }

// /deep/.el-icon-arrow-right {
//   font-size: 12px;
// }

/*2.展开按钮未点击的样式是加号带边框*/
// /deep/.el-table__expand-icon .el-icon-arrow-right:before {
//   color: #2265f9;
//   content: '\e6d9';
//   border: 1px solid #2265f9;
//   // padding: 1px;
//   box-sizing: border-box;
// }

/*2.按钮已点击展开之后的样式是减号带边框*/
// /deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before {
//   border-color: #666;
//   color: #666;
//   content: '\e6d8';
// }

.dialog-wraper {
  // z-index: 99999 !important;
  .wraper-box {
    width: 380px;
    height: 300px;
    margin-right: -10px;
    overflow: auto;

    .icon-box {
      text-align: center;
      display: inline-block;
      width: calc((100% - 100px) / 10);
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;
    }
  }
}

.table-btn {
  display: flex;
  align-items: center;
}

.demo-ruleForm {
  margin: 18px 15px;
}

.is-reverse {
  transform: rotateZ(0deg);
  transition: transform 0.3s;
}

.chose-cart {
  transform: rotateZ(90deg);
  transition: transform 0.3s;
}

.iconText-color {
  color: #c0c4cc;
}

.block-color-fill {
  color: #606266;
}

.chose-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #dcdfe6;
  min-height: 28px;
  line-height: 28px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  cursor: pointer;
  font-size: 12px;
  text-overflow: ellipsis;
}

.div-focus {
  &:hover {
    border: 1px solid #409eff;
  }
}
</style>
